<template>
	<div class="page-box">
		<div class="left-box">
			<div class="mb10">
				<el-button type="primary" icon="el-icon-plus" @click="openAddBrandDialog(1)">新增一级品牌</el-button>
			</div>
			<el-table v-loading="loading" :data="brandList" :cell-style="cellStyle" ref="singleTable" highlight-current-row @current-change="handleCurrentChange">
				<el-table-column label="名称" align="center" prop="name" width="100" />
				<el-table-column label="代号" align="center" prop="code" width="90" />
				<el-table-column label="所属公司" align="center" prop="dept" width="135">
					<template slot-scope="scope">
						{{ scope.row.dept != null?scope.row.dept.deptName:"" }}
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" width="200">
					<template slot-scope="scope">
						<el-button
						  size="mini"
						  type="text"
						  icon="el-icon-edit"
						  @click="openUpdateBrandDialog(scope.row, 1)"
						  v-hasPermi="['system:role:edit']"
						>修改</el-button>
						<el-button
						  size="mini"
						  type="text"
						  icon="el-icon-delete"
						  @click="handleDeleteBrand(scope.row)"
						  v-hasPermi="['system:role:remove']"
						>删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<pagination
			  v-show="total > 0"
			  :total="total"
			  :page.sync="queryParams.pageNum"
			  :limit.sync="queryParams.pageSize"
			  @pagination="handleGetBarandList"
			/>
		</div>
		<div class="right-box">
			<div class="mb10">
				<el-button icon="el-icon-edit" @click="openAddBrandDialog(2)">新增二级分类</el-button>
			</div>
			<el-table v-loading="loading2" :data="personBrandList">
				<el-table-column label="子分类" align="center" prop="name" width="250" />
				<el-table-column label="代号" align="center" prop="code" width="90" />
				<el-table-column label="排序" prop="sort" align="center" :show-overflow-tooltip="true" width="80" />
				<el-table-column label="是否独立" prop="sort" align="center" :show-overflow-tooltip="true" width="80">
					<template slot-scope="scope">
						<span v-if="scope.row.isSingle == 0" style="color: red;">否</span>
						<span v-if="scope.row.isSingle == 1" style="color: green;">是</span>
					</template>	
				</el-table-column>
				<el-table-column label="操作" align="center" width="200">
					<template slot-scope="scope">
						<el-button
						  size="mini"
						  type="text"
						  icon="el-icon-edit"
						  @click="openUpdateBrandDialog(scope.row, 2)"
						  v-hasPermi="['system:role:edit']"
						>修改</el-button>
						<el-button
						  size="mini"
						  type="text"
						  icon="el-icon-delete"
						  @click="handleDeleteBrandPerson(scope.row)"
						  v-hasPermi="['system:role:remove']"
						>删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<pagination
			  v-show="personTotal > 0"
			  :total="personTotal"
			  :page.sync="personQueryParams.pageNum"
			  :limit.sync="personQueryParams.pageSize"
			  @pagination="handleGetBrandPersonList"
			/>
		</div>
		
		<el-dialog :title="dialogTitle" :visible.sync="dialogShow" width="500px" append-to-body>
			<el-form ref="ruleForm" :model="form" :rules="rules" label-width="120px">
				<el-form-item v-if="isAddOneLevelBrand == 1" label="归属公司" prop="deptId">
				  <treeselect v-model="form.deptId" :options="deptOptions" :show-count="true" placeholder="请选择归属公司" />
				</el-form-item>
				<el-form-item v-if="isAddOneLevelBrand == 2" label="所有品牌">
					<el-select v-model="form.brandId">
						<el-option v-for="(item, index) in brandList" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item v-if="isAddOneLevelBrand == 2" label="是否独立">
					<el-switch
						v-model="isSingle"
						active-color="#13ce66"></el-switch>
				</el-form-item>
				<el-form-item label="品牌物料代号" prop="code">
					<el-input v-model="form.code" />
				</el-form-item>
				<el-form-item label="中文名称" prop="name">
					<el-input v-model="form.name" />
				</el-form-item>
				<el-form-item label="英文名称">
					<el-input v-model="form.englishName" />
				</el-form-item>
				<el-form-item label="排序" prop="sort">
					<el-input v-model="form.sort" />
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitBrand('ruleForm')">确 定</el-button>
				<el-button @click="dialogShow = false">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import { getBarandList, insertBrand, insertBrandPerson, getBrandPersonList, updateBrand, updateBrandPerson, getDeptList, delBrandByIds, delBrandPersonByIds } from "@/api/goods/brand"
	import { deptTreeSelect } from "@/api/system/user";
	import Treeselect from "@riophae/vue-treeselect";
	import "@riophae/vue-treeselect/dist/vue-treeselect.css";
	export default {
		components: { 
			Treeselect 
		},
		data() {
			return {
				dialogShow: false,
				dialogTitle: "编辑品牌",
				isSingle: false,
				form: {
					brandId: null,
					code: "",
					name: "",
					englishName: "",
					sort: null
				},
				rules: {
					code: [
						{ required: true, message: "请输入代号", trigger: "blur" }
					],
					name: [
						{ required: true, message: "请输入名称", trigger: "blur" }
					],
					// englishName: [
					// 	{ required: true, message: "请输入英文名称", trigger: "blur" }
					// ],
					sort: [
						{ required: true, message: "请输入排序", trigger: "blur" }
					]
				},
				isAddOneLevelBrand: 1,
				isAdd: true,
				brandList: [],
				total: 0,
				dateRange: [],
				queryParams: {
					pageNum: 1,
					pageSize: 10,
				},
				personBrandList: [],
				personTotal: 0,
				personQueryParams: {
					pageNum: 1,
					pageSize: 10,
				},
				currentRow: null,
				loading: true,
				loading2: true,
				// 部门树选项
				deptOptions: undefined,
				brandIds: [],
				brandPersonIds: [],
			}
		},
		mounted() {
			let that = this
			that.handleGetBarandList()
			that.hangleGetDeptList()
			that.getDeptTree()
		},	
		methods: {
			handleDeleteBrand(row) {
				let that = this
				const ids = row.id || that.brandIds;
				that.$modal.confirm("是否确认删除你选择的品牌吗？").then(function() {
					delBrandByIds(ids).then(res => {
						that.handleGetBarandList()
						that.$modal.msgSuccess("删除成功");
					}).catch(function() {
					});
				}).catch(() => {
					console.log("删除失败")
					that.$modal.msgSuccess("删除失败");
				});
			},
			handleDeleteBrandPerson(row) {
				let that = this
				const ids = row.id || that.brandPersonIds;
				that.$modal.confirm("是否确认删除你选择的品牌吗？").then(function() {
					delBrandPersonByIds(ids).then(res => {
						that.handleGetBrandPersonList(that.currentRow.id)
						that.$modal.msgSuccess("删除成功");
					}).catch(function() {
					});
				}).catch(() => {
					console.log("删除失败")
					that.$modal.msgSuccess("删除失败");
				});
			},
			/** 查询部门下拉树结构 */
			getDeptTree() {
				let that = this
				deptTreeSelect().then(res => {
					that.deptOptions = res.data;
				});
			},
			hangleGetDeptList() {
				getDeptList().then(res => {
					
				}).catch((e) => {
					console.log(e)
				});
			},
			cellStyle() {
				return "cursor: pointer;"
			},
			setCurrent(row) {
				let that = this
				that.$refs.singleTable.setCurrentRow(row);
			},
			handleCurrentChange(res) {
				let that = this
				that.currentRow = res;
				that.queryParams.pageNum = 1
				that.handleGetBrandPersonList(res.id)
			},
			handleGetBarandList() {
				let that = this
				that.loading = true
				getBarandList().then(res => {
					that.loading = false
					let brandList = res.rows
					that.brandList = brandList
					that.total = res.total
					if(brandList.length > 0) {
						let brand = brandList[0]
						that.setCurrent(brand)
					} else {
						that.loading2 = false
					}
					// that.handleGetPersonBarandList(brand.id)
				}).catch((e) => {
					console.log(e)
				});
			},
			handleGetBrandPersonList(brandId) {
				let that = this
				that.loading2 = true
				// let personQueryParams = that.personQueryParams
				// personQueryParams.brandId = brandId
				let param = {
					brandId: brandId
				}
				getBrandPersonList(param).then(res => {
					that.loading2 = false
					that.personBrandList = res.rows
					that.personTotal = res.total
				}).catch((e) => {
					console.log(e)
				});
			},
			openAddBrandDialog(res) {
				let that = this
				let form = {
					brandId: null,
					code: "",
					name: "",
					englishName: "",
					sort: null,
				}
				// that.form.brandId = that.currentRow != null?that.currentRow.id:null
				that.isAddOneLevelBrand = res
				if(res == 2){
					form.brandId = that.currentRow.id
					form.isSingle = 0
					that.dialogTitle = "新增品牌系列"
				}else{
					that.dialogTitle = "新增品牌"
				}
				that.form = form
				that.isAdd = true
				that.dialogShow = true
			},
			openUpdateBrandDialog(res, isAddOneLevelBrand) {
				let that = this
				that.isAddOneLevelBrand = isAddOneLevelBrand
				let form = {
					id: res.id,
					code: res.code,
					name: res.name,
					englishName: res.englishName,
					sort: res.sort,
					deptId: res.deptId
				}
				that.dialogTitle = "编辑品牌"
				if(isAddOneLevelBrand == 2){
					// form.brandPersonId = res.brandPersonId
					form.brandId = res.brandId
					form.isSingle = res.isSingle
					that.isSingle = res.isSingle == 0?false:true
					that.dialogTitle = "编辑品牌系列"
				}
				that.form = form
				that.isAdd = false
				that.dialogShow = true
			},
			submitBrand(formName) {
				let that = this
				that.$refs[formName].validate((valid) => {
					if (valid) {
						let form = that.form
						if(that.isAdd) {
							if(that.isAddOneLevelBrand == 1) {
								insertBrand(form).then(res => {
									that.dialogShow = false
									that.handleGetBarandList()
								}).catch((e) => {
									console.log(e)
								});
							} else {
								form.isSingle = that.isSingle == false?0:1
								insertBrandPerson(form).then(res => {
									that.dialogShow = false
									that.handleGetBrandPersonList(that.currentRow.id)
								}).catch((e) => {
									console.log(e)
								});
							}
						} else {
							if(that.isAddOneLevelBrand == 1) {
								updateBrand(form).then(res => {
									that.dialogShow = false
									that.handleGetBarandList()
								}).catch((e) => {
									console.log(e)
								});
							} else {
								form.isSingle = that.isSingle == false?0:1
								updateBrandPerson(form).then(res => {
									that.dialogShow = false
									that.handleGetBrandPersonList(that.currentRow.id)
								}).catch((e) => {
									console.log(e)
								});
							}	
						}
					} else {
						return false;
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-box{
		// height: 100vh;
		display: flex;
		// background-color: #f6f6f6;
		padding-top: 20px;
		.left-box {
			padding-left: 26px;
			width: 45%;
		}
		.right-box {
			flex: 1;
			padding-left: 20px;
		}
	}
</style>